<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加角色</title>
    <link rel="stylesheet" th:href="@{/src/css/layui.css}">
    <link rel="stylesheet" th:href="@{/src/zTree_v3/css/zTreeStyle/zTreeStyle.css}">
</head>
<body>
<form class="layui-form" style="width:80%;" id="roleForm">
    <!-- 权限提交隐藏域 -->
    <input type="hidden" id="menuId" name="menuId"/>
    <!--角色id-->
    <input type="hidden" id="id" name="id" th:value="${roles.id}"/>
    <div class="layui-form-item">
        <label class="layui-form-label">角色名</label>
        <div class="layui-input-block">
            <input type="text" id="roleName" class="layui-input userName" lay-verify="required"
                   placeholder="请输入角色名" name="roleName" th:value="${roles.roleName}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">职责描述</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入角色职责描述" class="layui-textarea linksDesc"
                      lay-verify="required" name="duty" >[[${roles.duty}]]</textarea>
        </div>
    </div>
    <!--权限树tree  -->
    <div class="layui-form-item">
        <label class="layui-form-label">分配权限：</label>
        <ul id="authoritytree" class="ztree" style="width:200px;margin-left: 105px"></ul>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit
                    type="button" id="editRole" lay-filter="editRole">立即提交</button>
        </div>
    </div>
</form>
<script th:src="@{/src/layui.js}"></script>
<script th:src="@{/src/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/src/zTree_v3/js/jquery.ztree.all.js}"></script>
<script>
    $(function () {
        var settings ={
            data:{
                simpleData:{
                    enable:true,
                    idKey:"id",
                    pIdKey:"parentId",
                },
                key:{
                    title:"title",
                    name:"title"
                }
            },
            check:{
                enable:true
            },
            view:{
                showIcon:true
            }
        }
        $.ajax({
            url:"/menus/checkTree/"+$("#id").val(),
            type:"post",
            dataType:'json',
            success:function (result) {
                $.fn.zTree.init($('#authoritytree'),settings,result);
            }
        });
        layui.use(['form','layer'],function () {
            var layer = layui.layer;
            //更新角色信息
            $("#editRole").click(function () {
                var tree = $.fn.zTree.getZTreeObj("authoritytree");
                var index = parent.layer.getFrameIndex(window.name);
                //ztree选中的节点
                arrList =tree.getCheckedNodes(true);
                str = "";
                $.each(arrList,function (index,obj){
                    str+=obj.id+",";
                })
                str = str.substring(0,str.length-1);
                //将节点的id字符串存储在隐藏域中
                $("#menuId").val(str);
                $.ajax({
                    url:"/roles/updateRoles",
                    type:"post",
                    dataType:'json',
                    data: $("#roleForm").serialize(),
                    success: function(result) {
                        alert(111111111);
                        layer.msg("+++++++++++++");
                        if (result.code==200){
                            layer.msg(result.message,{icon:1,time:1000},function () {
                                parent.layer.close(index);
                                parent.location.reload();
                            })
                        }else{
                            layer.msg(result.message,{icon:5});
                        }
                    }
                })
            })
        })

    })

</script>
</body>
</html>